<template>
  <div class="hello">
    <div class="banner">
      <div class="banner_top">
        <div class="banner_top_left">
          <img src="../assets/logo.jpg" alt="">
          <ul>
            <li><router-link to="/">首页</router-link></li>
            <li><router-link to="/destination">目的地</router-link></li>
            <li><router-link to="/strategy">旅行攻略</router-link></li>
            <li><router-link to="/stay">住宿</router-link></li>
            <li><router-link to="/ticket">机票</router-link></li>
            <li><router-link to="/about">联系我们</router-link></li>
          </ul>
        </div>
        <div class="banner_top_right">
          <input type="text" placeholder="请输入目的地/关键词">
          <p><router-link to="/denglu">登录</router-link></p> <p><router-link to="/denglu">注册</router-link></p><img src="../assets/user.png" alt="">
        </div>
      </div>
      <div class="banner_bottom">
        <img src="../assets/banner_05.jpg" alt="">
        <!-- input -->
        <div class="main_input"><input type="text" placeholder="输入想要去的地方"></div>
      </div>
       
    </div>
   
    
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
*{margin: 0 ;padding:0;}
.banner{width: 100%;color: white;}
.banner_top,.banner_top_left,.banner_top_right,.banner_top_left ul{display: flex;flex-direction: row;}
.banner_top{background-color: #549cd5;justify-content: space-between;}
.banner_top2{img{display: block;margin: 0 auto;}}
.banner_top_left{margin-left:5%;width: 60%;img{width: 30%;}}
.banner_top_right{margin-right: 5%;justify-content: space-between;width: 25%;}
.banner_top_left ul{width: 60%;justify-content: space-around;}
.banner_top_left ul li{list-style-type: none;line-height: 100px;}
.banner_top_left ul li a{text-decoration: none;color: white;padding: 10px 0px;&.router-link-exact-active,&:hover{border-bottom: 3px solid white;}}
.banner_top_right img{width: 30px;height: 30px;margin-top:35px;}
.banner_top_right input{height: 30px;border-top-left-radius:15px;border-top-right-radius:15px;border-bottom-right-radius:15px;background-image: url(../assets/search.png);background-position: 95% center;background-size: 20px;background-repeat: no-repeat;border-bottom-left-radius:15px;padding: 0 0 0 10px;margin-top:35px;border: 0;width: 50%;}
.banner_top_right p{margin-top: 35px;padding:5px 1%;}
.banner_top_right p a{width: 100%;text-decoration: none;color: #fff;}
.banner_bottom {position: relative;img{width: 100%;}}
.main_input{position: absolute;left: 30%;width: 50%;top: 96%;}
.main_input input{padding: 15px;width: 100%;border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-right-radius:30px;border-bottom-left-radius:30px;background-image: url(../assets/search.png);background-position: 95% center;background-size: 30px;background-repeat: no-repeat;border: 0; box-shadow: 0px 0px 0px 0px red,/*上边阴影  红色*/ 0px 0px 0px 0px green,/*左边阴影  绿色*/
0px 0px 0px 0px blue,/*右边阴影  蓝色*/ 0px 0px 10px 10px rgb(233, 233, 233);/*下边阴影  粉色*/}
.main_input img{width: 30px;}
</style>
